<template>
  <div class="edit">
    <!-- 1.0 头部导航结构 -->
    <van-nav-bar
      title="个人信息编辑"
      left-arrow
      @click-left="$router.back()"
      
      @click-right="$router.push({ path: '/' })"
    >
    <!-- 右边按钮不跳转，左边按钮返回的上一级路由的意思 -->
    <!-- 是右边按钮的字体图标 -->
      <template #right>
        <van-icon
          name="wap-home-o"
          color="#f00"
          size="6vw"
        />
      </template>
    </van-nav-bar>
    <!-- 头像 -->
    <div class="avatar">
      <div class="avatar-img">
        <van-image
          round
          fit="cover"
          width="100%"
          height="100%"
          :src="userinfo.head_img"
        />
        <van-uploader :after-read="afterRead" />
      </div>
    </div>
    <!-- 单元格 -->
       <!-- @click 点击事件其实可以写多行代码，用分号; 隔开即可 -->
    <Mycell
    title='昵称'
    :value="userinfo.nickname"
    @click="nicknameShow=true;nicknameTemp= userinfo.nickname"
    
    ></Mycell>
      <Mycell
    title='密码'
    value="*******"
       @click=" passwordShow = true; passwordNew = ''; passwordOld = '' "
    
    ></Mycell>
      <Mycell
    title='性别'
    :value="userinfo.gender ?'男':'女'"
    @click="gentershow=true"
    
    ></Mycell>
    <!-- :value="userinfo.gender ?'男':'女'" 三元表达式1显示男，-1显示女 -->
    <van-dialog v-model="nicknameShow" title="修改昵称" show-cancel-button @confirm='nicknameFn'>
         <van-field required v-model="nicknameTemp" label="文本" placeholder="请输入昵称" />
    <!-- 记得在 main 里面导入表单结构 -->
     
</van-dialog>
   <!-- 修改密码的模态框 -->
    <van-dialog
      v-model="passwordShow"
      title="修改密码"
      show-cancel-button
      @confirm="passwordFn"
      :before-close='beforeClose'
    >
      <van-field
        required
        v-model="passwordOld"
        label="原密码"
        placeholder="请输入原密码"
      />
      <van-field
        required
        v-model="passwordNew"
        label="新密码"
        placeholder="请输入新密码"
      />
    </van-dialog>
    <!-- //动作面板 -->
    <van-action-sheet
  v-model="gentershow"
  :actions=" [{ name: '男',gender:1 }, { name: '女',gender:0 }]"
  cancel-text="取消"
  close-on-click-action
  @select="genderFn"
/>
  </div>
</template>

<script>
import Mycell from'../components/Mycell.vue'
import {userDetailByIdAPI} from '../apis/user'
import {uploadFileAPI} from '../apis/index'
import {userUpdataByIdAPI} from '../apis/user'
import request from '../utils/request.js'
// this.$router.back()  可以实现返回
export default {
components: {
    Mycell
},
data () {
    return {
        //这是user传过来的数据
        userinfo:{},
        nicknameShow:false,
        nicknameTemp:'',
        //用户密码
         // 用户密码
      passwordShow: false,
      passwordNew: "",
      passwordOld: "",
      //男女选项
      gentershow:false
    }
},
 async created(){
      //通过vue 找到id到底在那个对象存储
       const id = this.$route.query.id;
      //根据id获取用户信息
      if(!id)this.$toast.fail('没有获取到id')
      const res = await userDetailByIdAPI(id)
      console.log(res);
      //获取用户头像，需要拼一些请求基地址
    //    res.data.data.head_img = request.defaults.baseURL + res.data.data.head_img;
    //   console.log(res.data.data.head_img);
      //拿到的数据给到userinfo data哪里
    //   this.userinfo=res.data.data
      if(res.data.data){
          res.data.data.head_img=
          request.defaults.baseURL + res.data.data.head_img,
          this.userinfo=res.data.data
      }

  },
  methods: {
      //file 就是选择的文件对象
        async afterRead(file) {

      // 此时可以自行将文件上传至服务器
      console.log(file);
      //上传需要用FormData的方式
      const fd=new FormData()
      fd.append('file',file.file)
      //传进去的参数是一个.FormData对象
      const res = await uploadFileAPI(fd)
      console.log(res);
     if (res.data.message === "文件上传成功") {
        // 获取图片地址
        const imgUrl = res.data.data.url;
        // 把新的图片地址，更新到用户信息中
        const res2 = await userUpdataByIdAPI(this.$route.query.id, {
          head_img: imgUrl,
        });
        // 更新头像的展示
        this.userinfo.head_img =
          request.defaults.baseURL + res2.data.data.head_img;
        // console.log(res2);
        this.$toast.success("用户头像更新成功");
      }
    },
    async nicknameFn(){
        //获取输入框的临时用户昵称
        if(this.nicknameTemp==='') return this.$notify('请输入昵称，不可以为空')
        //发送请求更新昵称
         const res = await userUpdataByIdAPI(this.$route.query.id,{
             nickname:this.nicknameTemp,
             })
             console.log(res);
             this.userinfo.nickname=res.data.data.nickname
             this.$toast.success('昵称更新成功')
    },
     // 修改用户密码
    passwordFn() {
    //   console.log("确认修改密码");
    // if(this.passwordOld===this.userinfo.passwordOld){
    //     console.log('修改成功');
    // }else{
    //     console.log('原始密码不正确');
    // }
    },
    //关闭弹出框前自动执行回调函数，需要在组件上绑定brfore-close
    async beforeClose(action, done){
        // console.log(action,done);
        //如果点击的是确定按钮
        if(action==='confirm'){
            //判断输入的密码等于原始密码或者要符合3-18个数字
            if(this.passwordOld===this.userinfo.password &&
            /^[a-zA-Z0-9~!@#$%^&*_+=-]{3,18}$/ .test(this.passwordNew)
            ){
                //符合密码正确
console.log('原始密码输入正确');
//然后拿到数据把新密码给回原来的密码更新到页面上
 const res = await userUpdataByIdAPI(this.$route.query.id,{
             password:this.passwordNew,
             })
             //判断数据里面是不是等于修改成功
             if(res.data.message==='修改成功'){
                 //是的话就把新代码更新到源代码哪里
                 this.userinfo.password=this.passwordNew
             }
             this.$toast.success('修改成功')
             done()
            }else{
                //如果错误的话，不关闭弹框
                done(false)
                this.$toast.fail('原密码输入错误或者不合法')
// console.log('原始密码输入正确');
            }
        }else{
            //主动关闭弹框
            done()
        }


    },
    //更新性别
   async  genderFn(item){
       //拿数据然后把修改的给到grnder
 const res = await userUpdataByIdAPI(this.$route.query.id,{
             gender:item.gender,
             })
             console.log(res);
             //判断拿到的数据是不是修改成功
             if(res.data.message==='修改成功'){
                 //是的话弹出轻提示，然后把数据更新在页面上，0和1已经在上面的三元表达式判断过渲染了
                 //会自动判断
this.$toast.success('性别更新成功')
this.userinfo.gender=res.data.data.gender
             }
    }
  }


}
</script>

<style lang="less" scoped>
.avatar {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
  .avatar-img {
    width: 100px;
    height: 100px;
  }
}
.van-uploader{
    position: absolute;
    left: 140px;
    top: 108px;
    opacity: 0;
}
</style>